/* mixins */
@import "src/mixins.scss";

// @include DEBUG();
@include useFontSmoothingOnMacOS();
/* wrapper 公共背景 */
.wrapper-bg {
  /* ... */
  // background-position: 0 1.7rem;
  // background-repeat: no-repeat;
  // background-size: 100%;
}
:host {
  height: 100%;
  box-sizing: border-box;
  padding-top: 0.46rem;
  padding-bottom: 1.5rem;
}

.container {
  width: 7.16rem;
  @include flex_dis();
  @include flex(flex-direction, column);
  padding-top: 0.5rem;
  box-sizing: border-box;
  position: relative;
  /* close */
  .container-close {
    position: absolute;
    right: 0.06rem;
    top: 0;
    width: 0.4rem;
    height: 0.4rem;
    z-index: 999;
  }
  /* tab */
  .container-tab {
    height: 0.72rem;
    @include flex_dis();
    @include flex(justify-content, center);
    margin: 0.1rem auto 0.12rem;
    .container-tab__item {
      width: 1.36rem;
      height: 0.72rem;
      background-size: 100% 100%;
    }
  }

  /* main */
  .container-main {
    height: calc(100% - (0.4rem + 0.72rem + 0.12rem));
    padding: 0.28rem 0; /* 防止背景层次重叠 */
    box-sizing: border-box;
    /* wrapper */
    .container-main--wrapper {
      height: 100%;
      overflow-y: scroll;
    }
    /* section */
    section {
      @include flex_dis();
      @include flex(flex-direction, column);
      @include flex(align-items, center);
      .section-title {
        width: 7.16rem;
        height: 0.92rem;
        background-size: 100% 100%;
      }
      > .section-main:first-of-type {
        margin-top: -0.1rem;
      }
      .section-main {
        width: 6.74rem;
        // height: 4.3rem;
        box-sizing: border-box;
        padding: 0.66rem 0 0.84rem;
        @include flex_dis();
        @include flex(flex-direction, column);
        @include flex(align-items, center);
        .section-main--item {
          width: 100%;
        }
        .section-main__title {
          font-size: 0.26rem;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          line-height: 0.36rem;
          text-align: center;
          margin-bottom: 0.2rem;
        }
        .section-main__content {
          width: 100%;
          padding: 0 0.4rem;
          box-sizing: border-box;
          @include flex_dis();
          @include flex(justify-content, space-around);
          // @include flex(align-items, center);
          @include flex(flex-wrap, wrap);

          /* 默认大小的小盒子 */
          .content-item {
            margin-bottom: 0.2rem;
            .content-item__main {
              width: 1.78rem;
              height: 1.92rem;
              background-size: 100% 100%;
              @include flex_dis();
              @include flex(justify-content, center);
              @include flex(align-items, center);
              position: relative;
              .main-pic {
                width: 1.16rem;
                height: 1.16rem;
                object-fit: cover;
                display: block;
              }
              .main-tag {
                position: absolute;
                right: 0.06rem;
                bottom: 0.1rem;
                width: 0.68rem;
                height: 0.34rem;
                background-size: 100% 100%;
                text-align: center;
                font-size: 0.24rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #4a2a16;
                line-height: 0.34rem;
              }

              .main-notice {
                position: absolute;
                left: 0.06rem;
                top: 0.14rem;
                width: 0.76rem;
                height: 0.38rem;
                background-size: 100% 100%;
              }
            }
            .content-item__name {
              width: 1.78rem;
              height: 0.68rem;
              word-break: break-all;
              @include flex_dis();
              @include flex(justify-content, center);
              @include flex(align-items, center);
              text-align: center;
              font-size: 0.24rem;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #fff7a6;
              line-height: 0.34rem;
            }
          }
          /* 大盒子/中盒子 */
          .content-item.unique {
            width: 100%;
            @include flex_dis();
            @include flex(flex-direction, column);
            @include flex(align-items, center);
            margin-bottom: 0.2rem;
            .content-item__main {
              width: 4.02rem;
              height: 1.92rem;
              .main-pic {
                width: 3.04rem;
                height: 1.52rem;
                object-fit: cover;
              }
              .main-tag {
                right: 0.18rem;
                bottom: 0.1rem;
              }
            }
            .content-item__name {
              width: 3.74rem;
              height: 0.4rem;
            }

            // 中等盒子
            &.medium {
              width: 4.02rem;
            }
          }
        }
      }
      /* TIPS */
      .section-tips {
        margin: 0.4rem 0 0.26rem;
        /* tips */
        .section-tips__text {
          width: 6.52rem;
          font-size: 0.24rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #d0d2f9;
          line-height: 0.34rem;
          margin: 0 auto 0.26rem;
        }
        .section-tips__qrs {
          @include flex_dis();
          @include flex(justify-content, space-around);
          .qrs-item {
            .qrs-item--qr {
              width: 2.18rem;
              height: 2.18rem;
              display: block;
              margin-bottom: 0.24rem;
            }
            .qrs-item--name {
              font-size: 0.24rem;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #feeebd;
              line-height: 0.34rem;
              text-align: center;
            }
            .qrs-item--else {
              font-size: 0.2rem;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #d0d2f9;
              line-height: 0.28rem;
              text-align: center;
              @include useFontSizeLT12(0.2);
            }
          }
        }
      }
    }
    > section:not(:last-of-type) {
      margin-bottom: 0.4rem;
    }
  }

  .giftMp4Box {
    position: fixed;
    top: -12%;
    left: -12%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    overflow: hidden;
  }
}
